<template>
    <div class="aman-list">
       <ul>
           <li v-for="i in listinfo" :key="i.id">
             <div class="left">
                 <img :src="i.img" alt="">
                 <p>{{i.num}}</p>
                 <p>粉丝</p>
             </div>
               <div class="right">
                   <p>{{i.name}}</p>
                   <p>{{i.aman}}</p>
                   <p>达人L{{i.grade}}</p>
                   <span>+ 关注</span>
               </div>
           </li>
       </ul>
    </div>
</template>

<script>
    export default {
        name: "AmanList",
        props:['listinfo']
    }
</script>

<style scoped lang="less">
    .aman-list{
        border: solid 1px #e0e0e0;
        ul{
            li{
                width: 260px;
                height: 128px;
                border-bottom: solid 1px #e0e0e0;
                padding: 18px 0 18px 25px;
                .left{
                    width: 50px;
                    float: left;
                    margin-right: 10px;
                    img{
                        width: 46px;
                        height: 46px;
                        border-radius: 50%;
                    }
                    p{
                        width: 46px;
                        text-align: center;
                        color: #666666;
                        font-size: 14px;
                    }
                    >:last-child{
                        color: #999999;
                        font-size: 12px;
                    }
                }
                .right{
                    float: left;
                    p{
                        margin-bottom: 2px;
                    }
                  >:first-child{
                      color: #ff5371;
                      font-size: 16px;
                  }
                    >:nth-child(2){
                        color: #666666;
                        font-size: 12px;
                    }
                    >:nth-child(3){
                        color: #cccccc;
                        font-size: 12px;
                    }
                    span{
                        display: block;
                        width: 94px;
                        height: 28px;
                        background-color: #ff5371;
                        border-radius: 4px;
                        color: white;
                        text-align: center;
                        line-height: 28px;
                        font-size: 14px;
                    }
                }
            }
        }
    }

</style>